<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>请猜数字</h3>
    <button class="revert">重新开始一局游戏</button><br>
    <span>请输入要猜的字：</span>
    <input type="text">
    <button class="submit">提交</button><br>

    <span>已经猜的次数：</span>
    <span class="count"></span><br>
    <span>结果：</span>
    <!-- 这个div,专门用于显示结果result -->
    <span class="result"></span>
    
    <script>
        // 1.生成1-100的随机数
            let toGuess = parseInt(100 * Math.random()) + 1;
            console.log(toGuess);

            // 重新开始一把游戏的处理：
            let count = 0;
            let revertButton = document.querySelector('.revert');
            revertButton.onclick = function(){
                if(count == 0){
                    return;
                }
                toGuess = parseInt(100 * Math.random()) + 1;
                console.log(toGuess);

                // 把次数和显示都消除
                let spanCount = document.querySelector('.count');
                spanCount.innerHTML = 0;
                let spanResult = document.querySelector('.result');
                spanResult.innerHTML = '';

            }
            // 2.猜数字
            let input = document.querySelector('input');
            let buttonSubmit = document.querySelector('.submit');
            buttonSubmit.onclick = function() {
                // 2.1 未输入就提交直接返回
                if(input.value == ''){
                    return;
                }
                // 2.2 猜数字
                let div = document.querySelector('div');
                let spanResult = document.querySelector('.result');
                if(input.value > toGuess){
                    // 大了
                    spanResult.innerHTML = '大了';
                }else if(input.value < toGuess){
                    // 小了
                    spanResult.innerHTML = '小了';
                }else{
                    // 猜对了
                    spanResult.innerHTML = '猜对了';
                }
                input.value = '';

                count++;

                let spanCount = document.querySelector('.count');
                spanCount.innerHTML = count;
            }
    </script>
</body>
</html>